<template>
  <div class="reactive">
    <p>直接定义数组:{{msg}}</p>
    <button @click="changearr">1</button>
    <button @click="changearr1">2</button>
    <br>
    <p>通过对象定义数组{{msg1.list}}</p>
    <button @click="changemsg1">3</button>
    <br>
    <br>
    <p>object:{{obj}}</p>
    <button @click="changeobj">4</button>
    <br>

  </div>
</template>
<script lang="ts" setup>
import { reactive } from "vue";

type O = {
  list: number[];
};
let msg = reactive<number[]>([]);
let msg1 = reactive<O>({
  list: [],
});
let obj = reactive({
  name: "小陈",
});

const changearr = () => {
  // 直接赋值会破坏数据的响应式
  msg = [1, 2, 3, 4, 5];
  console.log("msg=", msg);
};
const changearr1 = () => {
  let arr = [1, 2, 3, 4, 5];
  msg.push(...arr);
  console.log("msg=", msg);
};

const changemsg1 = () => {
  msg1.list = [1, 2, 3, 4];
};

const changeobj = () => {
  obj.name = "大陈";
};
</script>

<style lang="less" scoped>
div {
  font-size: 20px;
}
</style>
